<template>
  <div>
    <el-table :data="tableData5" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row class="rows" v-for="(v1,k1) in props.row.children" :key="v1.id">
            <el-col :span="6">
              <el-tag closable @close="closeTag(props.row,k1,v1.id,props.row.id)">{{v1.authName}}</el-tag>
              <i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="18">
              <el-row v-for="(v2,k2) in v1.children" :key="v2.id">
                <el-col :span="6">
                  <el-tag
                    @close="closeTag(v1,k2,v2.id,props.row.id)"
                    closable
                    type="success"
                  >{{v2.authName}}</el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="18">
                  <el-tag
                    @close="closeTag(v2,k3, v3.id,props.row.id)"
                    type="warning"
                    closable
                    v-for="(v3,k3) in v2.children"
                    :key="v3.id"
                  >{{v3.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作" prop="desc">
        <template slot-scope="scope">
          <el-button
            @click="editRole(scope.row)"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button size="mini" type="success" icon="el-icon-check" circle></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑角色" :visible="isshowRole">
      <el-form :model="Roledata">
        <el-form-item label="角色名称">
          <el-input v-model="Roledata.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="Roledata.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isshowRole = false">取 消</el-button>
        <el-button type="primary" @click="editRolePut">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData5: [],

      //   编辑角色
      isshowRole: false,
      Roledata: {}
    };
  },

  methods: {
    //   提交修改后的角色信息
    editRolePut() {
      this.$axios({
        url: `roles/${this.Roledata.id}`,
        method: "put",
        data: {
          roleDesc: this.Roledata.roleDesc,
          roleName: this.Roledata.roleName
        },
        headers: { Authorization: localStorage.getItem("token") }
      }).then(backdata=>{
          var {data,meta} = backdata.data;
          if(meta.status == 200){
              this.$message({message:meta.msg,type:'success'});
              this.isshowRole = false;
            //   this.getRole();
          }else{
              this.$message.error(meta.msg);
          }
      })
    },
    //   编辑角色弹窗
    editRole(row) {
      this.Roledata = row;
      this.isshowRole = true;
    },

    getRole() {
      this.$axios({
        url: "roles",
        method: "get",
        headers: { Authorization: localStorage.getItem("token") }
      }).then(backdata => {
        console.log(backdata);
        var { data } = backdata.data;
        this.tableData5 = data;
      });
    },

    //   删除角色对象的权限
    closeTag(item, key, tagid, roleid) {
      //   alert(1);
      // console.log(tagid,roleid)
      this.$axios({
        url: `roles/${roleid}/rights/${tagid}`,
        method: "delete",
        headers: { Authorization: localStorage.getItem("token") }
      }).then(backdata => {
        var { data, meta } = backdata.data;
        if (meta.status == 200) {
          this.$message({ message: meta.msg, type: "success" });
          //   this.getRole();
          item.children.splice(key, 1);
        } else {
          this.$message.error(meta.msg);
        }
      });
    }
  },

  mounted() {
    this.getRole();
  }
};
</script>

<style>
.has-gutter {
  line-height: 30px;
}
.rows {
  margin-top: 15px;
  line-height: 30px;
}
.el-tag {
  margin-right: 5px;
  margin-top: 10px;
}
</style>
